<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
      v-if="pageflag"
    ></Echart>
  </div>

</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
        pageflag:false,
      options: {},
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
        this.pageflag = true;
        currentGET("left1").then((res) => {

            // console.log('test',res)
            if (res.code== 200) {
                console.log("幸福压力指数成功", res.data)

                this.init(res.data)

            } else {
                console.log("幸福压力指数失败", res)
                this.pageflag = false;
                this.$Message.warning(res.msg);

            }
        })
        this.pageflag = true;



      // currentGET("big6", { companyName: this.companyName }).then((res) => {
      //   console.log("安装计划", res);
      //   if (res.success) {
      //     this.init(res.data);
      //   } else {
      //     this.pageflag = false;
      //     this.$Message({
      //       text: res.msg,
      //       type: "warning",
      //     });
      //   }
      // });
    },

    init(newData) {
        this.options = {
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(0,0,0,.6)",
                borderColor: "rgba(147, 235, 248, .8)",
                textStyle: {
                    color: "#FFF",
                },

            },
            // toolbox: {
            //     feature: {
            //         dataView: { show: true, readOnly: false },
            //         magicType: { show: true, type: ['line', 'bar'] },
            //         restore: { show: true },
            //         saveAsImage: { show: true }
            //     }
            // },
            legend: {
                data: ['压力线','压力柱', '幸福线','幸福柱'],
                textStyle: {
                          color: "#ffffff",
                        },
            },
            grid: {
                left: "40px",
                right: "40px",
                bottom: "60px",
                top: "34px",
            },

            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100,
                    minValueSpan: 4,

                },
                {
                    show: true,
                    type: 'slider',
                    bottom: 20,
                    height: 12,//组件高度
                    start: 0,
                    end: 100,
                    minValueSpan: 4
                }
            ],
            xAxis: {
                type: 'category',
                axisPointer: {
                    type: 'shadow'
                },
                data: newData.year,
                axisLine: {
                    lineStyle: {
                        color: "#B4B4B4",
                    },
                },
                axisTick: {
                    show: false,
                },
            },



            yAxis: [
                {   splitLine: { show: false },
                    type: 'value',
                    name: 'Precipitation',
                    min: null,
                    max: null,
                    interval: 2,
                    axisLine: {
                        lineStyle: {
                            color: "#B4B4B4",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                    },
                    scale: true
                },
                {
                    type:null,
                    name: null,
                    min: null,
                    max: null,
                    interval: null,
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "#B4B4B4",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}% ",
                    },
                }
            ],
            series: [


                {
                    name: '压力线',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: "emptyCircle",
                    symbolSize: 8,

                    itemStyle: {
                        color: "#F02FC2",
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value ;
                        }
                    },
                    data: newData.pressureData
                },

                {
                    name: '压力柱',
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        borderRadius: 5,
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#956FD4" },
                            { offset: 1, color: "#3EACE5" },
                        ]),
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value ;
                        }
                    },
                    data: newData.pressureData
                },
                {
                    name: '幸福线',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: "emptyCircle",
                    symbolSize: 8,

                    itemStyle: {
                        color: "rgba(127,190,0,0.87)",
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value ;
                        }
                    },
                    data: newData.HappinessData
                },
                {
                    name: "幸福柱",
                    type: "bar",
                    barGap: "-100%",
                    barWidth: 10,
                    itemStyle: {
                        borderRadius: 5,
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "rgb(255,220,104)" },
                            { offset: 1, color: "rgba(239,218,111,0.29)" },
                        ]),
                    },
                    z: -12,
                    data: newData.HappinessData,
                },


            ]
        };



      //     var tempoptions = {
      //   tooltip: {
      //     trigger: "axis",
      //     backgroundColor: "rgba(0,0,0,.6)",
      //     borderColor: "rgba(147, 235, 248, .8)",
      //     textStyle: {
      //       color: "#FFF",
      //     },
      //     // formatter: function (params) {
      //     //   // 添加单位
      //     //   var result = params[0].name + "<br>";
      //     //   params.forEach(function (item) {
      //     //     if (item.value) {
      //     //       if (item.seriesName == "安装率") {
      //     //         result +=
      //     //           item.marker +
      //     //           " " +
      //     //           item.seriesName +
      //     //           " : " +
      //     //           item.value +
      //     //           "%</br>";
      //     //       } else {
      //     //         result +=
      //     //           item.marker +
      //     //           " " +
      //     //           item.seriesName +
      //     //           " : " +
      //     //           item.value +
      //     //           "个</br>";
      //     //       }
      //     //     } else {
      //     //       result += item.marker + " " + item.seriesName + " :  - </br>";
      //     //     }
      //     //   });
      //     //   return result;
      //     // },
      //   },
      //   legend: {
      //     data: ["已安装", "计划安装", "安装率"],
      //     textStyle: {
      //       color: "#B4B4B4",
      //     },
      //     top: "0",
      //   },
      //   grid: {
      //     left: "50px",
      //     right: "40px",
      //     bottom: "30px",
      //     top: "20px",
      //   },
      //   xAxis: {
      //     data: newData.year,
      //     axisLine: {
      //       lineStyle: {
      //         color: "#B4B4B4",
      //       },
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //   },
      //   yAxis: [
      //     {
      //       splitLine: { show: false },
      //       axisLine: {
      //         lineStyle: {
      //           color: "#B4B4B4",
      //         },
      //       },
      //
      //       axisLabel: {
      //         formatter: "{value}",
      //       },
      //     },
      //     {
      //       splitLine: { show: false },
      //       axisLine: {
      //         lineStyle: {
      //           color: "#B4B4B4",
      //         },
      //       },
      //       axisLabel: {
      //         formatter: "{value}% ",
      //       },
      //     },
      //   ],
      //
      //
      //   series: [
      //     {
      //       name: "已安装",
      //       type: "bar",
      //       barWidth: 10,
      //       itemStyle: {
      //         borderRadius: 5,
      //         color: new graphic.LinearGradient(0, 0, 0, 1, [
      //           { offset: 0, color: "#956FD4" },
      //           { offset: 1, color: "#3EACE5" },
      //         ]),
      //       },
      //       data: newData.pressureData,
      //     },
      //     {
      //       name: "计划安装",
      //       type: "bar",
      //       barGap: "-100%",
      //       barWidth: 10,
      //       itemStyle: {
      //         borderRadius: 5,
      //         color: new graphic.LinearGradient(0, 0, 0, 1, [
      //           { offset: 0, color: "rgba(156,107,211,0.8)" },
      //           { offset: 0.2, color: "rgba(156,107,211,0.5)" },
      //           { offset: 1, color: "rgba(156,107,211,0.2)" },
      //         ]),
      //       },
      //       z: -12,
      //       data: newData.pressureData,
      //     },
      //     {
      //       name: "安装率",
      //       type: "line",
      //       smooth: true,
      //       showAllSymbol: true,
      //       symbol: "emptyCircle",
      //       symbolSize: 8,
      //       yAxisIndex: 1,
      //       itemStyle: {
      //         color: "#F02FC2",
      //       },
      //       data: newData.pressureData,
      //     },
      //   ],
      // };

    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
